import { PlusOutlined, CarryOutOutlined, FormOutlined } from '@ant-design/icons';
import { Button, message, Tree, Drawer, Layout } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { useIntl, FormattedMessage } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProCard from '@ant-design/pro-card';
import ProTable from '@ant-design/pro-table';
import ProForm, {
  BetaSchemaForm,
  ModalForm,
  ProFormText,
  ProFormDigit,
  ProFormCascader,
  ProFormSelect,
  ProFormTreeSelect,
  ProFormTextArea,
  ProFormColumnsType
} from '@ant-design/pro-form';
import { permCodeAdd, permCodeList } from  '@/services/ant-design-pro/permCode';
import { transformList2Tree } from '@/utils/utils'

const { DirectoryTree } = Tree;


const columns: ProColumns<API.PermCodeItem>[] = [
  {
    title: <FormattedMessage id="pages.searchTable.titleDesc" defaultMessage="部门名称" />,
    dataIndex: 'show_name'
  }
];

const schemaColumns: ProFormColumnsType<API.PermCodeItem>[] = [
  {
    title: '所属权限字',
    dataIndex: 'title',
    fieldProps: {
      disabled: true
    },
    width: 'm',
  },
  {
    valueType: 'group',
    columns: [
      {
        title: '权限字名称',
        dataIndex: 'groupState',
        width: 'sm',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '此项为必填项',
            },
          ],
        },
      },
      {
        title: '权限字名称',
        dataIndex: 'groupState',
        width: 'sm',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '此项为必填项',
            },
          ],
        },
      }
    ]
  },
  {
    valueType: 'group',
    columns: [
      {
        title: '权限字类型',
        dataIndex: 'groupState',
        valueType: 'select',
        width: 'sm',
        fieldProps: {
          disabled: true
        },
      },
      {
        title: '显示顺序',
        dataIndex: 'groupState',
        width: 'sm',
        valueType: 'digit',
      }
    ]
  }
]

// /api/v1/permModule/
const SysPermCode: React.FC = () => {
 /** 新建窗口的弹窗 */
 const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  /** 国际化配置 */
  const intl = useIntl();
  const [modalVisit, setModalVisit] = useState(false);
  const [permModules, setPermModules] = useState<any>([]);
  const [params, setParams] = useState<any>({pid: 0});
  let tempList: any[] = [];

  useEffect(() => {
    permCodeList().then(res => {
      const tree = transformList2Tree(res.data!.map((d) => ({
        title: d.show_name,
          value: d.id,
          key: d.id,
          id: d.id,
          pid: d.parent_id
      })))
      tempList = tempList.concat(tree)
      setPermModules(tempList)
    })
  }, [])

  const treeDataChange = (ids: any[]) => {
    setParams({
      pid: ids.join(',')
    })
  }

  return (
    <PageContainer>
      <ProTable<API.PermCodeItem, API.PageParams>
        headerTitle={intl.formatMessage({
          id: 'pages.searchTable.title',
          defaultMessage: '查询表格',
        })}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
          </Button>,
        ]}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        columns={columns}
        request={permCodeList}
        params={params}
      />

      <BetaSchemaForm
        visible={createModalVisible}
        onVisibleChange={handleModalVisible}
        layoutType={'ModalForm'}
        layout={"horizontal"}
        onFinish={async (values) => {
          const success = await permCodeAdd(values as API.PermCodeItem);
          if (success) {
            handleModalVisible(false);
          }
        }}
        columns={schemaColumns}
      />

    </PageContainer>
  );
};

export default SysPermCode;
